<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step 3</title>
</head>

<body>
    <div id="wp"></div>
    <script id="tpl" type="text/html">
        <ul>
            <% if (allData.show) { %>
                <% for (var i = 0; i < allData.data.length; i++) { %>
                    <li>
                        <%= allData.data[i].title %>
                        <%= allData.data[i].content %>
                    </li>
                <% } %>
            <% } else { %>
                <p>不展示列表</p>
            <% } %>
        </ul>
    </script>
    <script>
        const allData = {
            show: true,
            data: [{
                title: 'this is my first data',
                content: 'hello world 1'
            },
            {
                title: 'this is my second data',
                content: 'hello world 2'
            },
            {
                title: 'this is my third data',
                content: 'hello world 3'
            }]
        }
        const tmpl = (tpl, data) => {
            let result = `let p = []; p.push('`
            result += `${tpl.replace(/[\r\n\t]/g, '')
                .replace(/\\/g, '\\\\')
                .replace(/'/g, "\\'")
                .replace(/<%=\s*([^%>]+?)\s*%>/g, "'); p.push($1); p.push('")
                .replace(/<%/g, "');")
                .replace(/%>/g, "p.push('")
                }`
            result += "'); return p.join('');"
            const fn = new Function(result)
            return fn.apply(data)
        }

        const html = document.getElementById('tpl').innerHTML;
        const template = tmpl(html, allData)
        console.log(template)
        document.getElementById('wp').innerHTML = template;
    </script>
</body>

</html>